import { createRouter, createWebHistory } from 'vue-router';
import Layout from '@/layout/index.vue';
import Home from '@/views/Home/index.vue';
import { VueElement } from 'vue';

interface ComponentObject {
    path: string,
    redirect?: string,
    component?: VueElement
}

const routes: [ComponentObject] = [
    {
        path: '/',
        redirect: '/index',
    },
    {
        path: '/index',
        component: Layout,
        children: [
            {
                path: '',
                component: Home,
            },
            {
                path: 'about',
                component: () => import('@/views/About/index.vue'),
            },
            {
                path: 'discover',
                component: () => import('@/views/Discover/index.vue'),
            }
        ]
    },
    {
        path: '/search',
        component: () => import('@/views/Search/index.vue')
    },
    {
        path: '/scan',
        component: () => import('@/views/Scan/index.vue')
    },
    {
        path: '/location/:id',
        name: 'location',
        component: () => import('@/views/Location/index.vue')
    },
    {
        path: '/route/:id/:name/:lng/:lat',
        name: "route",
        component: () => import('@/views/Route/index.vue')
    },
    {
        path: '/login',
        component: () => import('@/views/Login/index.vue')
    }
]


const router = createRouter({
    history: createWebHistory(),
    scrollBehavior: () => ({ top: 100 }),
    routes
});

export default router;
